import { Component, OnInit, ViewChild, ElementRef, Input, Output, EventEmitter, AfterContentInit } from '@angular/core';
import * as go from '../../../assets/gojs/go-debug';
import { Observable } from 'rxjs/observable';
import { catchError, map, tap } from 'rxjs/operators';
import { interval } from 'rxjs/observable/interval';
import { passBoolean } from 'protractor/built/util';
import { Router } from '@angular/router';

@Component({
    selector: 'app-gojs02',
    templateUrl: './gojs02.component.html',
    styleUrls: ['./gojs02.component.scss']
})
export class GoJS02Component implements OnInit {

    title = 'My Custom GoJS App in Angular';

    /** 值 */
    model = new go.GraphLinksModel(
        [ // model.nodeDataArray
            { key: 1, text: '第一', color: 'lightblue', loc: '0 0' }, // 'x y', '0 0' = 中点
            { key: 2, text: '第二', color: 'orange', loc: '0 50' },
            { key: 3, text: '第三', color: 'lightgreen', loc: '0 100' },
            { key: 4, text: '第四', color: 'pink', loc: '60 100' }
        ],
        [ // model.linkDataArray
            { from: 1, to: 2 },
            { from: 2, to: 3 },
            { from: 3, to: 4 },
            { from: 4, to: 1 }
        ]);

    @ViewChild('text')
    private textField: ElementRef;

    data: any;
    node: go.Node;

    constructor(private router: Router) {

    }
    ngOnInit() {

    }

    showDetails(node: go.Node | null) {
        this.node = node;
        if (node) {
            // copy the editable properties into a separate Object
            this.data = {
                text: node.data.text,
                color: node.data.color
            };
        } else {
            this.data = null;
        }
    }

    onCommitDetails() {
        if (this.node) {
            const model = this.node.diagram.model;
            // copy the edited properties back into the node's model data,
            // all within a transaction
            model.startTransaction();
            model.setDataProperty(this.node.data, 'text', this.data.text);
            model.setDataProperty(this.node.data, 'color', this.data.color);
            model.commitTransaction('modified properties');
        }
    }

    onCancelChanges() {
        // wipe out anything the user may have entered
        this.showDetails(this.node);
    }

    onModelChanged(c: go.ChangedEvent) {
        // who knows what might have changed in the selected node and data?
        this.showDetails(this.node);
    }
}
